<script lang="ts" setup>
import { detailFlagshipCoupon, updateFlagshipCoupon } from '@fl/api/flagship/flagship-coupon'
import FlUpload from '@fl/components/fl-upload.vue'

const route = useRoute()
const router = useRouter()
const companyRef = ref<any>()
type formType = {
    enterpriseAbbreviation?: string
    enterpriseIntroduction?: string
    enterpriseType?: string
    enterpriseName?: string
    enterpriseTell?: string
    companyIntroduction?: string
    companyLabel?: string
    companyContactName?: string
    companyPhone?: string
    companyLogo?: string
    companyName?: string
    unifiedSocialCreditIdentifier?: string
    programAppid?: string
    programId?: string
    isGotoMini?: string
}

const isLoading = ref<boolean>(false)
const form = ref<formType>({
    enterpriseAbbreviation: '',
    enterpriseIntroduction: '',
    enterpriseType: '',
    enterpriseName: '',
    enterpriseTell: '',
    companyIntroduction: '',
    companyLabel: '',
    companyContactName: '',
    companyPhone: '',
    companyLogo: '',
    companyName: '',
    unifiedSocialCreditIdentifier: '',
    programAppid: '',
    programId: '',
    isGotoMini: '0',
    companyCover: '',
    companyChartUrl: '',
})
function updateForm(data: formType) {
    Object.assign(form.value, data)
    isLoading.value = false
}
const xmform = ref<any>({
    companyCover: '',
    companyChartUrl: '',
})
const xmrules = {
    // companyCover: [{ message: '品牌封面图不能为空', required: true, trigger: 'blur' }],
    companyChartUrl: [{ message: '品牌活动详情图不能为空', required: true, trigger: 'blur' }],
}
onMounted(() => {
    if (route.query.id) {
        isLoading.value = true
        detailFlagshipCoupon(route.query.id).then((res) => {
            updateForm(res.data as formType)
            xmform.value.companyCover = res.data.companyCover || ''
            xmform.value.companyChartUrl = res.data.companyChartUrl || ''
        })
    }
})

// 返回店铺管理
function rebackChange() {
    router.push('/content-center/flagship-coupon/management')
}
function onSubmit() {
    if (companyRef.value) {
        companyRef.value.validate((valid) => {
            if (valid) {
                const obj = { ...form.value, ...xmform.value }
                updateFlagshipCoupon(obj).then(() => {
                    ElMessage.success('修改成功')
                })
            }
        })
    }
}
</script>

<template>
    <el-skeleton v-if="isLoading" />

    <template v-else>
        <div class="title">
            品牌封面
            <p style="color: red; margin: 12px">
                图片大小不能超过5MB
            </p>
        </div>

        <el-form ref="companyRef"
                 :model="xmform"
                 :rules="xmrules"
                 label-width="150px"
        >
            <el-row>
                <el-col :span="10">
                    <el-form-item label="品牌封面图:"
                                  prop="companyCover"
                    >
                        <FlUpload v-model="xmform.companyCover"
                                  :file-size="5"
                        />
                    </el-form-item>

                    <div class="f-tips">
                        * 建议尺寸：936X540
                    </div>
                </el-col>

                <el-col :span="10">
                    <el-form-item label="品牌活动详情图:"
                                  prop="companyChartUrl"
                    >
                        <FlUpload v-model="xmform.companyChartUrl"
                                  :file-size="5"
                        />
                    </el-form-item>

                    <div class="f-tips">
                        * 建议尺寸：1125X606
                    </div>
                </el-col>
            </el-row>
        </el-form>

        <div class="button">
            <el-button plain
                       @click="rebackChange"
            >
                返回
            </el-button>

            <el-button type="primary"
                       @click="onSubmit"
            >
                保存
            </el-button>
        </div>
    </template>
</template>

<style lang="less" scoped>
.button {
    display: flex;
    justify-content: right;
    margin-right: 100px;
}
</style>
